import * as THREE from 'three';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';

// 创建自定义 CSS2DObject 类
class CustomCSS2DObject extends CSS2DObject {
    constructor(element: HTMLElement) {
        super(element);
    }

    updatezhj(title: any, ZHSD: number, CPL: number, FPL: number,) {
        const titleElement = this.element.querySelector('.statusLine:nth-child(1)');
        const ZHSDElement = this.element.querySelector('.statusLine:nth-child(2)');
        const CPLElement = this.element.querySelector('.statusLine:nth-child(3)');
        const FPLElement = this.element.querySelector('.statusLine:nth-child(4)');

        if (titleElement) titleElement.textContent = title || '未知';
        if (ZHSDElement) ZHSDElement.textContent = `装盒速度：${ZHSD}盒/分`;
        if (CPLElement) CPLElement.textContent = `成品量：${CPL}盒`;
        if (FPLElement) FPLElement.textContent = `废品量：${FPL}盒`;

    }
    updatebzj(title: string, CL: number, HFQS: number, HFQX: number, HFHS: number, HFHX: number, ZF: number, YR: number,) {
        const titleElement = this.element.querySelector('.statusLine:nth-child(1)');
        const CLElement = this.element.querySelector('.statusLine:nth-child(2)');
        const HFQSElement = this.element.querySelector('.statusLine:nth-child(3)');
        const HFQXElement = this.element.querySelector('.statusLine:nth-child(4)');
        const HFHSElement = this.element.querySelector('.statusLine:nth-child(5)');
        const HFHXElement = this.element.querySelector('.statusLine:nth-child(6)');
        const ZFElement = this.element.querySelector('.statusLine:nth-child(7)');
        const YRElement = this.element.querySelector('.statusLine:nth-child(8)');


        if (titleElement) titleElement.textContent = title || '未知';
        if (CLElement) CLElement.textContent = `产量：${CL}cm`;
        if (HFQSElement) HFQSElement.textContent = `横封前上：${HFQS}℃`;
        if (HFQXElement) HFQXElement.textContent = `横封前下：${HFQX}℃`;
        if (HFHSElement) HFHSElement.textContent = `横封后上：${HFHS}℃`;
        if (HFHXElement) HFHXElement.textContent = `横封后下：${HFHX}℃`;
        if (ZFElement) ZFElement.textContent = `纵封：${ZF}℃`;
        if (YRElement) YRElement.textContent = `预热：${YR}℃`;

    }
    updatelsbzj(title: string, ZCL: number, HGSL: number, FPSL: number, DZWD: number, FHWD: number,) {
        const titleElement = this.element.querySelector('.statusLine:nth-child(1)');
        const ZCLElement = this.element.querySelector('.statusLine:nth-child(2)');
        const HGSLElement = this.element.querySelector('.statusLine:nth-child(3)');
        const FPSLElement = this.element.querySelector('.statusLine:nth-child(4)');
        const DZWDElement = this.element.querySelector('.statusLine:nth-child(5)');
        const FHWDElement = this.element.querySelector('.statusLine:nth-child(6)');

        if (titleElement) titleElement.textContent = title || '未知';
        if (ZCLElement) ZCLElement.textContent = `总产量：${ZCL}板`;
        if (HGSLElement) HGSLElement.textContent = `合格数量：${HGSL}板`;
        if (FPSLElement) FPSLElement.textContent = `废品数量：${FPSL}板`;
        if (DZWDElement) DZWDElement.textContent = `打字温度：${DZWD}℃`;
        if (FHWDElement) FHWDElement.textContent = `封合温度：${FHWD}℃`;

    }
    updatekbj(title: string, CLJS: number, SSCS: number, JHCS: number, SCSD: number, YXTime: number,) {
        const titleElement = this.element.querySelector('.statusLine:nth-child(1)');
        const CLJSElement = this.element.querySelector('.statusLine:nth-child(2)');
        const SSCSElement = this.element.querySelector('.statusLine:nth-child(3)');
        const JHCSElement = this.element.querySelector('.statusLine:nth-child(4)');
        const SCSDElement = this.element.querySelector('.statusLine:nth-child(5)');
        const YXTimeElement = this.element.querySelector('.statusLine:nth-child(6)');


        if (titleElement) titleElement.textContent = title || '未知';
        if (CLJSElement) CLJSElement.textContent = `产量计数：${CLJS}包`;
        if (SSCSElement) SSCSElement.textContent = `实时层数：${SSCS}层`;
        if (JHCSElement) JHCSElement.textContent = `集盒层数设定：${JHCS}`;
        if (SCSDElement) SCSDElement.textContent = `生产速度：${SCSD}包/分`;
        if (YXTimeElement) YXTimeElement.textContent = `运行总时间：${YXTime}h`;

    }
}

// 创建 CSS2DRenderer
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(labelRenderer.domElement);

// 创建生成 CSS2DObject 的函数
function createLabelzhj(id: string, title: string | null, ZHSD: number, CPL: number, FPL: number, position: THREE.Vector3Like) {
    const statusDiv = document.createElement('div');
    statusDiv.className = 'label';
    statusDiv.id = id;
    statusDiv.style.marginTop = '-1em';
    statusDiv.style.color = 'white';
    statusDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    statusDiv.style.padding = '5px';
    statusDiv.style.borderRadius = '5px';

    const line1Div = document.createElement('div');
    line1Div.className = 'statusLine';
    line1Div.textContent = title;
    statusDiv.appendChild(line1Div);

    const line2Div = document.createElement('div');
    line2Div.className = 'statusLine';
    line2Div.textContent = `装盒速度：${ZHSD}盒/分`;
    statusDiv.appendChild(line2Div);

    const line3Div = document.createElement('div');
    line3Div.className = 'statusLine';
    line3Div.textContent = `成品量：${CPL}盒`;
    statusDiv.appendChild(line3Div);

    const line4Div = document.createElement('div');
    line4Div.className = 'statusLine';
    line4Div.textContent = `废品量：${FPL}盒`;
    statusDiv.appendChild(line4Div);

    const label = new CustomCSS2DObject(statusDiv);
    label.position.copy(position);
    label.name = id;

    console.log(`创建标签: ${id}, 初始状态: ${title}`);
    return label;
}

// 其他 createLabel 函数也可以采用类似的方式来扩展
function createLabelbzj(id: string, title: string | null, CL: number, HFQS: number, HFQX: number, HFHS: number, HFHX: number, ZF: number, YR: number, position: THREE.Vector3Like) {
    const statusDiv = document.createElement('div');
    statusDiv.className = 'label';
    statusDiv.id = id;
    statusDiv.style.marginTop = '-1em';
    statusDiv.style.color = 'white';
    statusDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    statusDiv.style.padding = '5px';
    statusDiv.style.borderRadius = '5px';

    const line1Div = document.createElement('div');
    line1Div.className = 'statusLine';
    line1Div.textContent = title;
    statusDiv.appendChild(line1Div);

    const line2Div = document.createElement('div');
    line2Div.className = 'statusLine';
    line2Div.textContent = `产量：${CL}cm`;
    statusDiv.appendChild(line2Div);

    const line3Div = document.createElement('div');
    line3Div.className = 'statusLine';
    line3Div.textContent = `横封前上：${HFQS}℃`;
    statusDiv.appendChild(line3Div);

    const line4Div = document.createElement('div');
    line4Div.className = 'statusLine';
    line4Div.textContent = `横封前下：${HFQX}℃`;
    statusDiv.appendChild(line4Div);

    const line5Div = document.createElement('div');
    line5Div.className = 'statusLine';
    line5Div.textContent = `横封后上：${HFHS}℃`;
    statusDiv.appendChild(line5Div);

    const line6Div = document.createElement('div');
    line6Div.className = 'statusLine';
    line6Div.textContent = `横封后下：${HFHX}℃`;
    statusDiv.appendChild(line6Div);

    const line7Div = document.createElement('div');
    line7Div.className = 'statusLine';
    line7Div.textContent = `纵封：${ZF}℃`;
    statusDiv.appendChild(line7Div);

    const line8Div = document.createElement('div');
    line8Div.className = 'statusLine';
    line8Div.textContent = `预热：${YR}℃`;
    statusDiv.appendChild(line8Div);

    const label = new CustomCSS2DObject(statusDiv);
    label.position.copy(position);
    label.name = id;

    console.log(`创建标签: ${id}, 初始状态: ${title}`);
    return label;
}

// 创建其他标签函数同样修改
function createLabellsbzj(id: string, title: string | null, ZCL: number, HGSL: number, FPSL: number, DZWD: number, FHWD: number, position: THREE.Vector3Like) {
    const statusDiv = document.createElement('div');
    statusDiv.className = 'label';
    statusDiv.id = id;
    statusDiv.style.marginTop = '-1em';
    statusDiv.style.color = 'white';
    statusDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    statusDiv.style.padding = '5px';
    statusDiv.style.borderRadius = '5px';

    const line1Div = document.createElement('div');
    line1Div.className = 'statusLine';
    line1Div.textContent = title;
    statusDiv.appendChild(line1Div);

    const line2Div = document.createElement('div');
    line2Div.className = 'statusLine';
    line2Div.textContent = `总产量：${ZCL}板`;
    statusDiv.appendChild(line2Div);

    const line3Div = document.createElement('div');
    line3Div.className = 'statusLine';
    line3Div.textContent = `合格数量：${HGSL}板`;
    statusDiv.appendChild(line3Div);

    const line4Div = document.createElement('div');
    line4Div.className = 'statusLine';
    line4Div.textContent = `废品数量：${FPSL}板`;
    statusDiv.appendChild(line4Div);

    const line5Div = document.createElement('div');
    line5Div.className = 'statusLine';
    line5Div.textContent = `打字温度：${DZWD}℃`;
    statusDiv.appendChild(line5Div);

    const line6Div = document.createElement('div');
    line6Div.className = 'statusLine';
    line6Div.textContent = `封合温度：${FHWD}℃`;
    statusDiv.appendChild(line6Div);
    // const line4Div = document.createElement('div');
    // line4Div.className = 'statusLine';
    // line4Div.textContent = `时间：${minute}min`;
    // statusDiv.appendChild(line4Div);

    const label = new CustomCSS2DObject(statusDiv);
    label.position.copy(position);
    label.name = id;

    console.log(`创建标签: ${id}, 初始状态: ${title}`);
    return label;
}


function createLabelkbj(id: string, title: string | null, CLJS: number, SSCS: number, JHCS: number, SCSD: number, YXTime: number, position: THREE.Vector3Like) {
    const statusDiv = document.createElement('div');
    statusDiv.className = 'label';
    statusDiv.id = id;
    statusDiv.style.marginTop = '-1em';
    statusDiv.style.color = 'white';
    statusDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    statusDiv.style.padding = '5px';
    statusDiv.style.borderRadius = '5px';

    // 创建并添加第一行文本
    const line1Div = document.createElement('div');
    line1Div.className = 'statusLine';
    line1Div.textContent = title;
    statusDiv.appendChild(line1Div);

    // 创建并添加第二行文本
    const line2Div = document.createElement('div');
    line2Div.className = 'statusLine';
    line2Div.textContent = `产量计数：${CLJS}包`;
    statusDiv.appendChild(line2Div);

    // 创建并添加第三行文本
    const line3Div = document.createElement('div');
    line3Div.className = 'statusLine';
    line3Div.textContent = `实时层数：${SSCS}层`;
    statusDiv.appendChild(line3Div);

    // 创建并添加第四行文本
    const line4Div = document.createElement('div');
    line4Div.className = 'statusLine';
    line4Div.textContent = `集盒层数设定：${JHCS}`;
    statusDiv.appendChild(line4Div);

    // 创建并添加第五行文本
    const line5Div = document.createElement('div');
    line5Div.className = 'statusLine';
    line5Div.textContent = `生产速度：${SCSD}包/分`;
    statusDiv.appendChild(line5Div);

    // 创建并添加第六行文本
    const line6Div = document.createElement('div');
    line6Div.className = 'statusLine';
    line6Div.textContent = `运行总时间：${YXTime}h`;
    statusDiv.appendChild(line6Div);
    // 创建CSS2DObject
    const label = new CustomCSS2DObject(statusDiv);
    label.position.copy(position);

    // 设置name属性，使其与WebSocket数据中的tagname匹配
    label.name = id;  // 使用标签的id作为name属性


    return label;
}
export { createLabelzhj, createLabelbzj, createLabellsbzj, createLabelkbj, labelRenderer };
